<template>
  <div class="recharge">
    <header class="header">
      <router-link to="/" class="back-link">
        <img src="@/assets/images/return.png" alt="" />
      </router-link>
      <h1 class="page-title">充值</h1>
    </header>
    <section>
      <!-- 这里是显示育儿 -->
      <div class="card">
        <div class="card-header">
          <div class="info_box1">
            <div class="balance-label">USDT余额</div>
            <div class="balance-value usdt">
              ${{ parseFloat(infoStore.infomation.usdt).toFixed(2) }}
            </div>
          </div>
        </div>
      </div>
      <!-- 充值按钮 -->
      <div class="body_content">
        <div class="withdraw-amount">
          <div class="withdraw-label">充值数量</div>
          <div class="input_box">
            <van-field
              v-model="amount"
              type="number"
              class="input-field"
              placeholder="请输入充值数量"
              autocomplete="off"
            />
          </div>
        </div>

        <van-button class="btn-primary" @click="handleRecharge"
          >确 定</van-button
        >
      </div>
    </section>
  </div>
  <MyDialog
    v-model:show="dialogVisible"
    title="提示"
    :content="`是否继续充值 ${amount} USDT？`"
    @confirm="onConfirm"
  />
</template>

<script setup lang="ts">
import { showLoadingToast, showToast, closeToast } from "vant";
import { useInfoStore } from "@/store/infoman";
import { useConWallet } from "@/hooks/concactWallet";
// 充值
import { Apitoken, Recharge, PreRecharge } from "@/api/modules/RechangeW";
const amount = ref<string>("");
// 获取用户信息
const infoStore = useInfoStore();
// 点击让用户确认是否继续
const dialogVisible = ref<boolean>(false);
const onConfirm = async () => {
  getPreRecharge();
  dialogVisible.value = false;
};

const handleRecharge = async () => {
  if (amount.value !== "") {
    getApitoken();
    dialogVisible.value = true;
  }
};
// 获取apitoken
const apiToken = ref<string>("");
const getApitoken = async () => {
  try {
    const res = await Apitoken();
    if (res.code === 0) {
      apiToken.value = res.data.api_token;
    }
  } catch (err) {
    console.log(err);
  }
};

// 充值预下单
const orderSn = ref<string>("");
const getPreRecharge = async () => {
  const data = {
    amount: amount.value,
    currency: "USDT",
  };
  const headers = {
    APITOKEN: apiToken.value,
  };
  try {
    const res = await PreRecharge(data, headers);
    if (res.code === 0) {
      orderSn.value = res.data.order_sn;
      getRecharge();
    } else {
      showToast(res.msg);
    }
  } catch (err) {
    console.log(err);
  }
};

// 充值回调
const { transferErc } = useConWallet();
const getRecharge = async () => {
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });

  try {
    if (orderSn.value !== "") {
      // 等待 transferErcBTY 完成并获取交易哈希
      const txHash = await transferErc(
        import.meta.env.VITE_DEPOSIT_ADRESS,
        // "0xc1b98E34b7B4Fb9752808D556b767E4C613C0e3f",
        amount.value
        // 0.000001
      );
      if (txHash) {
        const res = await Recharge({
          order_sn: orderSn.value,
          hash: txHash,
        });
        if (res.code === 0) {
          closeToast(); // 点睛之笔，这里关掉后不影响后面的新toast
          showToast(res.msg);
          // showToast({
          //   message: $t("Waitfor"),
          //   duration: "60000",
          // });
          // setTimeout(() => {
          //   amount.value = null;
          //   infoStore.getInfo();
          // }, 60000); // 30 seconds delay
          infoStore.getInfo();
        } else {
          showToast(res.msg);
          closeToast(); // 点睛之笔，这里关掉后不影响后面的新toast
        }
      }
    }
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => {
  infoStore.getInfo();
});
</script>

<style scoped lang="less">
.recharge {
  height: 100vh;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(91deg, #f8f8ed 0%, #f5f9f1 50%, #d4f5ea 100%);

    padding: 16px 9px 16px 0px;
    .back-link {
      margin-left: 23px;
      img {
        width: 21px;
        height: 21px;
      }
    }

    .page-title {
      position: absolute;
      top: 15px;
      left: 50%;
      transform: translate(-50%, -50%); /* 居中修正 */
      font-size: 25px;
      font-weight: bold;
      color: #165f4c;
    }
  }
  section {
    padding: 21px;
    padding-top: 34px;
    .card {
      padding: 11px;
      border-radius: 10px 10px 10px 10px;
      border: 1px solid #ffffff;
      .card-header {
        display: flex;
        background: #edf9f4;
        border-radius: 10px 10px 10px 10px;
        padding: 25px;
        .info_box1 {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .balance-label {
            font-size: 12px;
            color: #22825c;
            margin-bottom: 8px;
          }
          .balance-value {
            font-size: 25px;
            font-weight: bold;

            &.usdt {
              color: #22825c;
            }

            &.da-you {
              color: #fcbc35;
            }
          }
        }
      }
    }
    .body_content {
      margin-top: 23px;
      padding: 20px 20px 41px 20px;
      background: linear-gradient(91deg, #f1fef7 0%, #f9f5e6 100%);
      border-radius: 10px 10px 10px 10px;
      .withdraw-label {
        font-size: 16px;
        color: #22825c;
        margin-bottom: 8px;
      }
      .withdraw-amount {
        width: 100%;
        .input_box {
          padding: 8px 0px 8px 18px;
          font-size: 19px;
          background: #dbf7ee;
          border-radius: 10px 10px 10px 10px;
          .input-field {
            background-color: transparent;
          }
        }
      }
      .btn-primary {
        margin-top: 42px;
        background: linear-gradient(158deg, #31dfb0 0%, #0fc68a 100%);
        border-radius: 52px 52px 52px 52px;
        color: white;
        padding: 10px;
        border: none;
        text-align: center;
        width: 100%;
        font-size: 19px;
        box-shadow: 0px 0px 1px 3px rgba(2, 232, 155, 0.5);
      }
    }
  }
}
.recharge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(10% 0% at 50% 50%, #30d29c 0%, #9be7c9 100%);
  filter: blur(50px);
  z-index: -1; /* 确保背景不覆盖子内容 */
}
</style>
